<template>
  <div>
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/welcome' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>商品管理</el-breadcrumb-item>
      <el-breadcrumb-item>商品分类</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card style="margin-top: 15px">
      <el-button type="primary" @click="add">添加分类</el-button>

      <tree-table :data="tableData1" :columns="columns" :selection-type="false" :expand-type="false" show-index
        index-text="#" border :show-row-hover="false" style="margin-top: 15px">
        <template slot="isok" slot-scope="scope">
          <i class="el-icon-success" v-if="scope.row.cat_deleted === false" style="color: lightgreen"></i>
          <i class="el-icon-error" v-else style="color: red"></i>
        </template>

        <template slot="order" slot-scope="scope">
          <el-tag size="mini" v-if="scope.row.cat_level === 0">一级</el-tag>
          <el-tag type="success" size="mini" v-else-if="scope.row.cat_level === 1">二级</el-tag>
          <el-tag type="warning" size="mini" v-else>三级</el-tag>
        </template>

        <template slot="opt" slot-scope="scope">
          <el-button type="primary" icon="el-icon-edit" size="mini" @click="edit(scope.row)">编辑</el-button>
          <el-button type="danger" icon="el-icon-delete" size="mini" @click="del(scope.row)">删除</el-button>
        </template>
      </tree-table>
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
        :current-page="querInfo.pagenum" :page-sizes="[5, 10, 11, 11]" :page-size="querInfo.pagesize"
        layout="total, sizes, prev, pager, next, jumper" :total="total">
      </el-pagination>
    </el-card>
    <!-- 编辑 -->
    <el-dialog title="修改分类" :visible.sync="dialogFormVisible">
      <el-form :model="dataedit" ref="edit" :rules="rules">
        <el-form-item label="分类名称">
          <el-input v-model="dataedit.cat_name" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogFormVisibleEdit">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 添加 -->
    <el-dialog title="添加分类" :visible.sync="dialogFormVisibleadd">
      <el-form :model="addcates" :rules="rules" ref="refadd">
        <el-form-item label="分类名称" prop="cat_name">
          <el-input v-model="addcates.cat_name" autocomplete="off" width="50"></el-input>
        </el-form-item>
        <el-form-item label="父级分类">
          <el-cascader v-model="checkAll" :options="options" :props="cateProps" expand-trigger="hover"
            @change="cat_change" ref="goodsref"></el-cascader>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisibleadd = false">取 消</el-button>
        <el-button type="primary" @click="dialogFormVisibleok">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import {
    getgoodscategoriesApi,
    getcategoriesdelApi,
    getcategoriesdeitApi,
    getcategoriesAddApi,
    getaddApi,
  } from "@/http/api";
  export default {
    data() {
      return {
        rules: {
          cat_name: [{
            required: true,
            message: "请输入活动名称",
            trigger: "blur",
          }, ],
        },
        cateProps: {
          label: "cat_name",
          value: "cat_id",
          children: "children",
          checkStrictly: true,
        },
        addcates: {
          cat_pid: "",
          cat_name: "",
          cat_level: "",
        },
        options: [],
        form: [],
        dataedit: {
          cat_name: "",
          id: 0,
        },
        dialogFormVisible: false,
        dialogFormVisibleadd: false,
        tableData1: [],
        checkAll: [],
        querInfo: {
          pagenum: 1,
          pagesize: 5,
        },
        formLabelWidth: "100px",
        total: 0,
        columns: [{
            label: "分类名称",
            prop: "cat_name",
          },
          {
            label: "是否有效",
            type: "template",
            template: "isok",
          },
          {
            label: "排序",
            type: "template",
            template: "order",
          },
          {
            label: "操作",
            type: "template",
            template: "opt",
          },
        ],
      };
    },
    created() {
      this.getlist();
    },
    components: {},
    mounted() {},
    methods: {
      dialogFormVisibleok() {
        // console.log(this.checkAll.length,'0986780');
        if (this.checkAll.length !== 0) {
          this.addcates.cat_pid = this.current_Cate_id;
          this.addcates.cat_level = this.checkAll.length;
        } else {
          this.addcates.cat_pid = 0;
          this.addcates.cat_level = 0;
        }
        this.$refs.refadd.validate(async (valid) => {
          if (valid) {
            const res = await getaddApi(this.addcates);
            this.getlist();
            this.addcates.cat_name = "";
            this.checkAll = [];
            this.dialogFormVisibleadd = false;
          } else {
            console.log("error submit!!");
            return false;
          }
        });
      },
      cat_change() {
        // console.log(this.$refs.goodsref);
        this.$refs.goodsref.dropDownVisible = false;
      },
      async add() {
        this.dialogFormVisibleadd = true;
        const res = await getcategoriesAddApi({
          type: 2,
        });
        // console.log(res, "44444");
        this.options = res;
        this.getlist();
      },
      async dialogFormVisibleEdit() {
        const res = await getcategoriesdeitApi(this.dataedit);
        // console.log(res,"编辑");
        this.getlist();
        this.dialogFormVisible = false;
      },
      edit(row) {
        this.dialogFormVisible = true;
        // console.log(row,"hhh");
        this.dataedit.cat_name = row.cat_name;
        this.dataedit.id = row.cat_id;
      },
      del(row) {
        console.log(row.cat_id);
        this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          })
          .then(() => {
            getcategoriesdelApi(row.cat_id).then((res) => {
              this.getlist();
            });
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消删除",
            });
          });
      },
      handleSizeChange(val) {
        console.log(val);
        this.querInfo.pagesize = val;
        this.getlist();
      },
      handleCurrentChange(val) {
        console.log(val);
        this.querInfo.pagenum = val;
        this.getlist();
      },
      getlist() {
        getgoodscategoriesApi(this.querInfo).then((res) => {
          console.log(res);
          this.total = res.total;
          this.tableData1 = res.result;
        });
      },
    },
    computed: {
      current_Cate_id() {
        return this.checkAll[this.checkAll.length - 1];
      },
    },
    watch: {},
  };

</script>

<style scoped lang='less'>
</style>
<style>
  .el-input {
    width: 100%;
  }

  .el-cascader {
    width: 100%;
  }

  .el-radio {
    position: absolute;
    width: 100%;
    height: 24px;
    margin-left: -20px;
  }

  .el-radio__inner {
    display: none;
  }

</style>
